<template>
  <div class="relative">
    <video
      class="w-full h-full object-fill"
      id="ckplayer_a1"
      ref="video"
      :src="video_src"
      @canplay="play"
      x5-video-player-type="h5"
      preload="metadata"
      playsinline="true"
      webkit-playsinline="true"
      x-webkit-airplay="true"
      x5-video-orientation="portraint"
      x5-video-player-fullscreen="true"
      :poster="cover_src"
    ></video>
    <div class="absolute left-0 bottom-0 px-4 mb-4 text-sm text-yellow-500">
      <div class="flex items-center">
        <img :src="avatar" class="rounded-full w-8 h-8" />
        <div class="ml-2 flex-col">
          <div>{{ title }}</div>
          <div>{{ subtitle }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// import wx from 'weixin-jsapi'
import wxShare from '../../plugins/wxShare.js'

export default {
  data() {
    return {
      video_src: '',
      cover_src: '',
      avatar: '',
      title: '',
      subtitle: '',
    }
  },
  created() {
    const query = this.$route.query
    // console.log(query)
    this.video_src = query.url
    this.cover_src = query.cover
    this.avatar = query.avatar
    this.nickname = query.nickname

    if (query.avatar) {
      this.avatar = query.avatar
    } else {
      this.avatar = new URL('../../assets/xhk.png', import.meta.url).href
    }

    if (query.points) {
      this.title = `我用喜花开智能牙刷刷牙得分 ${query.points}`
    } else {
      this.title = query.nickname
    }

    if (query.running_days && query.total_days) {
      this.subtitle = `我在喜花开APP已连续打卡${query.running_days}天 ，累计打卡${query.total_days}天！`
    } else {
      this.subtitle = query.title
    }

    document.addEventListener('touchstart', this.play, false)
    document.addEventListener('click', this.play, false)

    wxShare({
      title: this.title,
      imgUrl: this.cover_src,
      desc: this.subtitle,
    })
  },
  methods: {
    play() {
      //   console.log('play start...')
      this.$refs.video.play()
    },
  },
}
</script>
